<table>
    <tbody id="data-template" style="display: none;">
        <tr>
            <td>
                <a class="layui-btn layui-bg-blue layui-btn-xs insertElem">插入</a>
                <a class="layui-btn layui-btn-xs addNewField">追加</a>
                <a class="layui-btn  layui-bg-red layui-btn-xs delThisField">删除</a>
            </td>

            <td>
                <input class="layui-input" name="field_nameFORM_INDEX" value="" lay-verify="required" required
                    placeholder="字段" title="字段名，默认为数据库字段名，如非必要，请勿修改">
                <br>
                <input class="layui-input field-type" value="" name="field_typeFORM_INDEX"
                    title="默认为数据库字段类型，如非必要，请勿修改；修改格式：varchar(255),int(10),decimal(12,2)" placeholder="字段类型"
                    lay-verify="required" required>

            </td>
            <td>

                <input class="layui-input" name="form_nameFORM_INDEX" title="显示中文名称，默认为数据库字段备注" placeholder="名称"
                    lay-verify="required" required>
                <br>
                <input name="field_defaultFORM_INDEX" id="field_defaultINDEX_ID" class="layui-input" placeholder="字段默认值"
                    title="表单内字段默认值，默认为数据库默认值，可空">
            </td>
            <td>
                <div>

                    <input type="checkbox" value="1" id="is_listFORM_INDEX" lay-skin="primary" name="is_listFORM_INDEX"
                        title="列表展示">
                    <input type="checkbox" value="1" id="list_sortFORM_INDEX" name="list_sortFORM_INDEX"
                        lay-skin="primary" title="参与排序">
                </div>
                <br>

                <select name="index_searchFORM_INDEX" class="select2 layui-input input-sm" id="index_searchFORM_INDEX"
                    data-placeholder="列表页筛选" style="width: 150px;">
                    <option value="">不参与列表页筛选</option>
                    <option value="search">关键词搜索</option>
                    <option value="select">下拉列表筛选</option>
                    <option value="date">日期范围筛选</option>
                    <option value="datetime">日期时间范围筛选</option>
                </select>

            </td>

            <td>
                <div>
                    <select name="form_typeFORM_INDEX" lay-filter="selectField" data-index="INDEX_ID" lay-search
                        lay-verify="required" required>
                        <option value="">验证规则</option>
                        <option value="none">非表单字段</option>
                        <option value="text">文本[text]</option>
                        <option value="number">数字[number]</option>
                        <option value="password">密码[password]</option>
                        <option value="mobile">手机号[mobile]</option>
                        <option value="email">邮箱[email]</option>
                        <option value="id_card">身份证号[id_card]</option>
                        <option value="url">网址[url]</option>
                        <option value="ip">IP地址[ip]</option>
                        <option value="textarea">文本域[textarea]</option>
                        <option value="checkbox">复选[checkbox]</option>
                        <option value="switch">开关[switch]</option>
                        <option value="radio">单选[radio]</option>
                        <option value="select">选择列表[select]</option>
                        <option value="key_words">关键词[key-words]</option>
                        <option value="multi_select">多项选择列表[multi-select]</option>
                        <option value="image">图片上传[image]</option>
                        <option value="cropper_image">图片剪裁上传[cropper-image]</option>
                        <option value="layui_image">layui多图上传[layui-image]</option>
                        <option value="layui_cropper_image">layui裁剪多图上传[layui-cropper-image]</option>
                        <option value="image_manage">图片选择器[image-manage]</option>
                        <option value="video">视频上传[video]</option>
                        <option value="file">文件上传[file]</option>
                        <option value="multi_file">多文件上传[multi-file]</option>
                        <option value="webuploader_file">多大文件上传[webuploader-file]</option>
                        <option value="layui_file">layui多文件上传[layui-file]</option>
                        <option value="date">日期[date]</option>
                        <option value="date_range">日期范围[date-range]</option>
                        <option value="datetime">日期时间[datetime]</option>
                        <option value="datetime_range">日期时间范围[datetime-range]</option>
                        <option value="year">年[year]</option>
                        <option value="year_range">年范围[year-range]</option>
                        <option value="year_month">年月[year-month]</option>
                        <option value="year_month_range">年月范围[year-month-range]</option>
                        <option value="map">地图选点[map]</option>
                        <option value="color">颜色选择[color]</option>
                        <option value="icon">图标选择[icon]</option>
                        <option value="editor">富文本编辑器[editor]</option>
                    </select>
                </div>
                <br>
                <div id="form_validateINDEX_ID"></div>

            </td>
            <script>
                xmSelect.render({
                    el: '#form_validateINDEX_ID',
                    filterable: true,
                    name: 'form_validateFORM_INDEX',
                    data: [{
                            'value': 'required',
                            'name': '非空'
                        },
                        {
                            'value': 'account',
                            'name': '账号'
                        },
                        {
                            'value': 'cn_name',
                            'name': '中文姓名'
                        },
                        {
                            'value': 'car_number',
                            'name': '车牌号'
                        },
                    ]
                })
            </script>

            <td>
                <div>
                    <select name="getter_setterFORM_INDEX" id="getter_setterFORM_INDEX">
                        <option value="">获取/修改器</option>
                        <option value="0">无需获取/修改器</option>
                        <option value="switch">开关</option>
                        <option value="date">日期</option>
                        <option value="datetime">日期时间</option>
                    </select>
                </div>
                <br>
                <div id="field_sceneINDEX_ID"></div>
            </td>
            <script>
                var field_sceneINDEX_ID = xmSelect.render({
                    el: '#field_sceneINDEX_ID',
                    filterable: true,
                    name: 'field_sceneFORM_INDEX',
                    data: [{
                            name: 'admin_add',
                            value: 'admin_add',
                            selected: true
                        },
                        {
                            name: 'admin_edit',
                            value: 'admin_edit',
                            selected: true
                        },
                        {
                            name: 'api_add',
                            value: 'api_add',
                            selected: true
                        },
                        {
                            name: 'api_edit',
                            value: 'api_edit',
                            selected: true
                        },
                        {
                            name: 'index_add',
                            value: 'index_add',
                            selected: true
                        },
                        {
                            name: 'index_edit',
                            value: 'index_edit',
                            selected: true
                        },
                    ]
                })
            </script>
            <td>
                <div class="layui-col-md12">
                    <textarea class="layui-textarea" id="field_select_dataFORM_INDEX" name="field_select_dataFORM_INDEX"
                        placeholder="自定义筛选/select数据，当前字段为 列表选择 的时候生效。格式为：value||name，多个选项换行即可"
                        title="例如[性别]字段，表单是[select]形式的，数据内容为：0||保密  1||男  2||女。一定要注意value和name的分割竖线为英文竖线，非中文竖线，不同的选项一定要换行"></textarea>
                </div>
            </td>
            <td>
                <div>
                    <label>
                        <select data-index="FORM_INDEX" name="relation_typeFORM_INDEX"
                            class="select2 form-control form-control-sm min-width-125" lay-filter="relation"
                            data-relation-table="relation_tableFORM_INDEX" data-relation-show="relation_showFORM_INDEX">
                            <option value="">是否关联字段</option>
                            <option value="0">非关联字段</option>
                            <option value="1">外键一对一</option>
                            <option value="2">外键一对多</option>
                            <option value="3">主键一对一</option>
                            <option value="4">主键一对多</option>
                        </select>
                    </label>
                </div>
                <br>
                <div>
                    <div>
                        <input name="relation_showFORM_INDEX" class="layui-input relation-input"
                            id="relation_showINDEX_ID"
                            title="belongsTo填写，例如文章发布人user_id要显示成User模型的nickname，填写nickname即可" placeholder="关联显示字段">
                    </div>
                    <br>
                    <div>
                        <input name="relation_tableFORM_INDEX" class="layui-input relation-input"
                            id="relation_tableINDEX_ID"
                            title="一般此字段为表名，belongsTo的无须填写，hasOne/hasMany填写此字段，关联多个模型务必使用英文逗号隔开，例如用户关联多篇文章，多个积分记录，可以写成article,integral_log"
                            placeholder="关联表/模型">
                    </div>
                </div>
            </td>

        </tr>
    </tbody>

</table>